<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css3带倒影效果的图片翻转特效</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>


<div class="scene">
  <div class="card">
    <div class="card__face card__face--front"> <img src="img/1a.jpg" /> </div>
    <div class="card__face card__face--back"> <img src="img/1b.jpg" /> </div>
  </div>
  <div class="card">
    <div class="card__face card__face--front"> <img src="img/2a.jpg" /> </div>
    <div class="card__face card__face--back"> <img src="img/2b.jpg" /> </div>
  </div>
  <div class="card">
    <div class="card__face card__face--front"> <img src="img/4a.jpg" /> </div>
    <div class="card__face card__face--back"> <img src="img/4b.jpg" /> </div>
  </div>
  <div class="card">
    <div class="card__face card__face--front"> <img src="img/3b.jpg" /> </div>
    <div class="card__face card__face--back"> <img src="img/3a.jpg" /> </div>
  </div>
</div>
</body>
</html>